<template>
	<view class="content">

		<!-- 第一部分 信息 -->
		<view class="info">
			<view>
				<!-- 店名 -->
				<view class="name">
					<view class="orange">源小茶天府新谷店</view>
					<image class="picon" src="../../static/dayu.png" mode=""></image>
				</view>
				<!-- 定位 -->
				<view class="location">
					<image class="picon" src="../../static/dw.png" mode=""></image>
					<view>距离您100m</view>
				</view>
			</view>
			<image class="logo" src="../../static/logo1.png" mode=""></image>
		</view>
		<view class="emptyCart" v-if="cartData.length<=0">
			<view>购物车空空如也。。。</view>
			<view class="toProduct" @click="toProduct()">去购买</view>
		</view>
		<view v-else>
			<!-- 第二部分 所有的数据 -->
			<view class="carts">
				<!-- 其中的一个商品 cartData -->
				<view class="cart" v-for="cart in cartData">
					<image :src="httpImageUrl+cart.product.pimageurl" mode=""></image>
					<!-- 右侧描述信息 -->
					<view class="ml10">
						<view class="pname">{{cart.product.pname}}</view>
						<view class="tintroduce mt10">{{cart.product.tintroduce}}</view>
						<view class="mt10 bottom">
							<view>￥<text
									class="tprice">{{Number.parseFloat(cart.product.tprice*cart.number).toFixed(2)}}</text>
							</view>
							<!-- 减少  和  新增  -->
							<view class="change">
								<text class="fontWeight" @click="changeNumber('down',cart.number,cart.id)"> - </text>
								<view class="number">{{cart.number}}</view>
								<text class="fontWeight" @click="changeNumber('add',cart.number,cart.id)"> + </text>
							</view>
						</view>
					</view>
					<view class="deleteBtn" @click="deleteCart(cart.id)">删除</view>
				</view>
			</view>

			<!-- 第三部分 结算 -->
			<view class="settlement">
				<view> <text>合计：￥</text> <text class="tprice">{{getTotalPrice}}</text> </view>
				<view class="tosettlement" @click="addOrder()">去下单</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartData: [],
				otype: 1,// 订单类型 0：门店自取 1：外卖（默认值）
			}
		},
		onLoad() {
			
		},
		onShow: function() {
			var that = this;
			// 将Index这个tabBar传来的otype订单类型存入到Vue实例的data域中
			that.otype = getApp().globalData.otype;
			
			//1.获取当前用户的所有 商品信息
			uni.getStorage({
				key: "token",
				success(res) {
					console.log("我的购物车获取token信息，", res.data);
					that.queryCartInfo(res.data, null); // 传入token信息
				}
			});
		},
		computed: {
			getTotalPrice() {
				var num = 0;
				for (var i = 0; i < this.cartData.length; i++) {
					var cart = this.cartData[i];
					console.log("调用计算属性", cart);
				 num += cart.number * cart.product.tprice
			 }
				let resPrice = Number.parseFloat(num).toFixed(2);
				console.log('resPrice = ', resPrice);
				return resPrice; //保留小数点后面两位
			},
		},
		methods: {
			queryCartInfo(token, id) {
				var that = this;
				//发起请求
				uni.request({
					url: that.httpUrl + 'cart/queryCartInfo', //仅为示例，并非真实接口地址。
					data: {
						token: token,
					},
					header: {
						'custom-header': 'application/json', //自定义请求头信息
						'token': token
					},
					success: (reqResult) => {
						console.log("获取购物车信息，", reqResult.data.data)
						if(reqResult.data.code.toString() !== '-1'){
							that.cartData = reqResult.data.data;
						}else{
							that.cartData = [];
						}
						
					}
				});
			},
			
			// 点击删除后，发起请求that.cartData = reqResult.data.data
			deleteCart(id) {
				var that = this;
				uni.getStorage({
					key: "token",
					success(res) {
						console.log("删除购物车获取token信息，", res.data);
						//发起请求
						uni.request({
							url: that.httpUrl + 'cart/deleteCart', //仅为示例，并非真实接口地址。
							data: {
							// 	token: res.data,
								id: id
							},
							method: 'DELETE',
							header: {
								'custom-header': 'application/json', //自定义请求头信息
								'token': res.data,
							},
							success: (reqResult) => {
								console.log("删除购物车信息，", reqResult.data.data)
								uni.showToast({
									title: reqResult.data.msg,
									icon: reqResult.data.code.toString() === "0" ? 'success' : 'error',
									duration: 1000,
								})
								that.queryCartInfo(res.data, id)
							}
						});
					}
				})
			},
			
			//改变数量
			changeNumber(cmd, cartNumber, id) {
				var that = this;
				if ("DOWN" === ((cmd + "").toUpperCase()) && (Number.parseInt(cartNumber) - 1) < 0) {
					// 如果减购商品数量时，数量 < 0则不允许减购操作
					uni.showToast({
						title: "操作异常",
						icon: "error",
						duration: 1500
					});
					return;
				}
				uni.getStorage({
					key: "token", // token是用户已登录的凭证，登录成功后才可添加购物车和下单
					success(res) {
						console.log("改变数量，获取token信息，", res.data);
						console.log("cmd = ", cmd, "id=", id)
						//发起请求
						uni.request({
							url: that.httpUrl + 'cart/changeNumber', //仅为示例，并非真实接口地址。
							data: {
								token: res.data,
								id: id, // 根据cartId修改对应商品的加购数量
								cmd: cmd // cmd即表示变化类型，是+1还是-1
							},
							header: {
								'custom-header': 'application/json', //自定义请求头信息
								'token': res.data,
							},
							success: (reqResult) => {
								console.log("改变购物车信息，", reqResult.data.data)
								that.queryCartInfo(res.data, id);
							}
						});

					}
				})
			},
			//点击结算，生成订单
			addOrder() {
				var that = this;
				uni.getStorage({
					key: "token",
					success(res) {
						console.log("生成订单获取token信息，", res.data);
						//发起请求
						uni.request({
							url: that.httpUrl + 'order/addOrder', //仅为示例，并非真实接口地址。
							data: {
								token: res.data,
								otype: that.otype // 订单类型 0：门店自取 1：外卖
							},
							method: 'POST',
							header: {
								'custom-header': 'application/json', //自定义请求头信息
								 'token': res.data,
							},
							success: (reqResult) => {
								console.log("生成订单，");
								if (reqResult.data.code.toString() !== "0") {
									uni.showToast({
										title: reqResult.data.msg,
										icon: 'error',
										duration: 2000
									});
									return;
								}
								uni.showToast({
									title: reqResult.data.msg,
									duration: 2000
								});
								let dataRenderDelayTimeId = setTimeout(() => {
									//1.跳转页面  (我的订单)
									uni.switchTab({
										url: '/pages/my/my'
									});
									clearTimeout(dataRenderDelayTimeId);
								}, 2000);

							}
						});
					}
				})
			},
			toProduct() {
				uni.switchTab({
					url: "/pages/product/product"
				})
			}
		}
	}
</script>

<style>
	/* 第一部分 */
	.info {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		border-bottom: 1px solid #999;
		padding-bottom: 10rpx;
	}

	.picon {
		width: 40rpx;
		height: 40rpx;
	}

	.name {
		display: flex;
		align-items: center;
		font-size: 36rpx;
		font-weight: bold;
		padding: 10rpx 40rpx;
	}

	.location {
		display: flex;
		align-items: center;
		padding: 0rpx 40rpx;
		font-size: 26rpx;
		color: #999;
	}

	.logo {
		width: 200rpx;
		height: 100rpx;
	}

	/* 第二部分 */
	.carts {
		margin-bottom: 150rpx;
	}

	.cart {
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;
		margin-top: 40rpx;
		border-bottom: 1px solid #f5f5f5;
		padding-bottom: 20rpx;
		align-items: center;
	}

	.cart image {
		width: 200rpx;
		height: 200rpx;
	}

	.typename {
		color: #999;
		margin-top: 10rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
	}

	.product {
		margin-left: 20rpx;
		margin-top: 20rpx;
		display: flex;
	}

	.product image {
		width: 200rpx;
		height: 200rpx;
	}

	.tintroduce {
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 可以显示的行数，超出部分用...表示*/
		-webkit-box-orient: vertical;
		color: #999;
		font-size: 30rpx;
	}

	.pname {
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 260rpx;
	}

	.tprice {
		font-weight: bold;
		color: orange;
		font-size: 40rpx;
	}

	.deleteBtn {
		width: 100rpx;
		height: 60rpx;
		background-color: orange;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50%;
		padding: 10rpx;
		color: #fff;
		font-weight: bold;
	}

	/* 新增  减少部分 */
	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.change {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 40rpx;
	}

	.change .number {
		width: 40rpx;
		border: 1px solid #cdcdcd;
		margin: 0 20rpx;
		padding: 0 5rpx;
		text-align: center;
		font-size: 30rpx;
	}

	/* 结算 */
	.settlement {
		height: 100rpx;
		border-top: 1px solid #f5f5f5;
		display: flex;
		padding: 10rpx 50rpx;
		position: fixed;
		bottom: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #fff;
		width: 100%;
	}

	.tosettlement {
		position: absolute;
		right: 150rpx;
		background-color: orange;
		border-radius: 80%;
		width: 150rpx;
		color: #fff;
	}


	.emptyCart {
		color: #999;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 600rpx;
	}

	.toProduct {
		color: orange;
	}
</style>
